<template>
	<view >
		<view class="hq">
			<view>USDT</view>
		</view>
		<view class="fooler" >
			<view class="fooler-title3" >
				<view class="title3 title3-title" v-for="(item,index) in Currency" :key="index" @tap="navSort(item,index)">
					{{item.name}}
					<image v-if="index==sSort &&index!=0" :src="sortType=='1'?imgurl.dsc:imgurl.desc"></image>
					<image v-else-if="index!=0" :src="imgurl.des"></image>
				</view>
			</view>
			<view class="fooler-title3"  v-for="(item,index) in bilei" :key="index" style="line-height: 40rpx;padding: 20rpx 0rpx;">
				<view class="title3 text" >
					{{cases(item.baseCurrency)}}<text>/{{cases(item.quoteCurrency)}}</text>
				</view>
				<view class="title3 text" >
					<view >{{pinters(item.newPrice)}}</view>
				</view>
				<view class="title3" >
					<view class="child" :class="{bgcolor:pinters(item.priceLimit*100,2)>=0,}">{{pinters(item.priceLimit*100,2)}}%</view>
				</view>
			</view>
			<!-- 暂无数据 -->
		    <hide v-if="bilei.length=='0'"/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img:{
					hide:'/static/Collection.png',
					show:'/static/Collections.png',
				},
				Currency: [{
						name: '币种',
					},
					{
						name: '最新价',
						icon: '/static/desc.png',
					},
					{
						name: '24H涨幅',
						icon: '/static/dsc.png',
					}
				],
				imgurl: {
					desc: '/static/desc.png', //升序
					dsc: '/static/dsc.png', //降序
					des: '/static/des.png', //平
				},
				bilei: [],
				bileiindex:null,//下标、
				sortType: '1', //图片类型
				sSort: '1', //资产 或者盈亏
				wherthe:false,//升序降序
				datas:'newPrice',//升序降序字段
				pages:1,
				inter:null,
			};
		},
		computed:{
			pinters(){
				return (t,flex=4)=>{
					if(!t) return '0.0000'
					let data=this.util.decimal(t,flex)
					if(data=='0.0000'){//shib 这种小币种 都是5位小数点
						return this.util.decimal(t,7)
					}else{
						return data;
					}
				}
			},
			cases(){
				return t=>t.toUpperCase();
			}
		},
		onLoad() {
			this.Collection()
		},
		onShow() {
			this.datatime()
		},
		onHide() {
		   clearInterval(this.inter);
		  },
		methods: {
			datatime(){
			    this.inter=setInterval(()=>{
			     this.Collection()
			    },3000);
			   },
			Collection(e=''){
				this.request.post(`symbol/list?pageSize=50&page=${this.pages}`).then(res=>{
					if(res.data.code=='3') return clearInterval(this.inter);//重新登录
					this.bilei=res.data.data.sort(this.sortBy(this.datas, this.wherthe))
				})
			},
			navSort(item, index) {
				if (index == 0) return;
				if (this.sSort == index) {
					this.sortType++
					if (this.sortType > 2) this.sortType = 1
				} else {
					this.sSort = index
					this.sortType = 1
				}
				this.wherthe = this.sortType == '1' ? false : true; //降序顺序
				let i=item.name
				this.datas=i=='最新价'?'newPrice':'priceLimit'
				this.bilei=this.bilei.sort(this.sortBy(this.datas, this.wherthe))
			},
			sortBy(attr, rev) {
				//第二个参数没有传递 默认升序排列
				if (rev == undefined) {
					rev = 1;
				} else {
					rev = (rev) ? 1 : -1;
				}
				return function(a, b) {
					a = a[attr];
					b = b[attr];
					if (a < b) {
						return rev * -1;
					}
					if (a > b) {
						return rev * 1;
					}
					return 0;
				}
			},
		}
	};
</script>
<style lang="scss">
	.title3-title{
		margin-top: 10rpx;
		line-height: 80rpx;
	}
	.hq {
		display: flex;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-top: 50rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 52px;
		// border: 1px solid red;
		color: #000000;
	}
	.fooler {
		padding: 0rpx 20rpx 20rpx;
		.fooler-title {
			font-size: 28rpx;
			font-family: PingFang;
			color: #666666;
			display: flex;
			align-items: center;

			&::before {
				content: '';
				text-align: center;
				// background-image: url(../../static/jiaoyi.png);
				background-size: 80%;
				background-repeat: no-repeat;
				width: 50rpx;
				height: 32rpx;
				// padding-left: 30rpx;
				margin: 8rpx 0rpx 0rpx 10rpx;
			}
		}

		.fooler-title2 {
			display: flex;
			// border: 1px solid red;
			margin: 10rpx 0rpx;

			.title2 {
				// border: 1px solid red;
				// width: 12%;
				// border: 1px solid red;
				margin: 0rpx 15rpx;
				// transition: 0.5s;
				// padding-left: 15rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: bold;
				line-height: 55rpx;
				color: #999999;

			}

			.show {
				font-size: 34rpx;
				color: #333333;
				font-family: PingFang;
				font-weight: bold;
				border-bottom: 1rpx solid $border;
			}
		}
		.shows{
			background: rgba(#1677FF,0.2);
		}
		.hides{
			background: #263749;
		}
		.hides-color{
			color: #636F7C !important;
			text{
			color: #636F7C !important;	
			}
		}
		.fooler-title3 {
			display: flex;
			line-height: 70rpx;
			margin: 0rpx 10rpx;
			border-bottom: 1rpx solid $border;

			.title3 {
				display: flex;
				// display: inline-block;
				align-items: center;
				color: $color-fu;
				image {
					// margin-top: 15rpx;
					width: 20rpx;
					margin-left: 5rpx;
					height: 25rpx;
				}

				.img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
				text{
					color: $color-fu;
					font-weight: 500;
					font-size: 24rpx;
					margin-top: 5rpx;
				}
				.child {
					display: inline;
					// padding: 10rpx 15rpx;
					// width: 120rpx;
					text-align: center;
					color: #FFFFFF;
					// border: 1px solid red;
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: 500;
					line-height: 60rpx;
					width: 130rpx;
					border-radius: 10rpx;
					background: rgba(#e31345,0.9);
					&.desc {
						color: #16D172;
					}
				}
				.bgcolor{
					background: rgba(#16d172,0.9);
				}
			}

			.title3:nth-child(1) {
				width: 40%;
			}

			.title3:nth-child(2) {
				// padding-left: 50rpx;
				width: 30%;
			}

			.title3:nth-child(3) {
				// text-align: right;
				justify-content: flex-end;
				width: 30%;
			}
		}
	}

	.text {
		font-size: 32rpx;
		font-family: PingFang;
		font-weight: bold;
		line-height: 60rpx;
		color: #000000 !important;
		.cnm {
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			line-height: 32rpx;
			color: #999999;
		}
	}
	.swiper-text{
		margin-top: 50rpx;
		// width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang;
		font-weight: 400;
		line-height: 36rpx;
		color: #999999;
		image{
			width: 186rpx;
			height: 201rpx;
			margin-bottom: 20rpx
		}
	}
	.popup-content {
		// position: absolute;
		// top:450rpx;
		// left: 50%;
		// margin-left: -295rpx;
		width: 590rpx;
		height: 388rpx;
		background: #000000;
		border-radius: 10rpx;
	    text-align: center;
		.titleer {
			// height: 50rpx;
			width: 100%;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #333333;
			border-bottom: 1rpx solid $border;
			opacity: 0.93;
		}
	
		.body-content {
			padding: 30rpx 40rpx;
	
			.text {
				margin-bottom: 24rpx;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #999999;
			}
		}
	
		.btn {
			margin: 0 auto;
			width: 422rpx;
			height: 80rpx;
			color: #000000;
			line-height: 80rpx;
			text-align: center;
			background: $light-color;
			opacity: 1;
			border-radius: 6rpx;
		}
	}
</style>
